<template>
  <view class="theater-item flex" @click.native="onItem">
    <img class="poster" src="@/assets/images/item.jpg" />
    <view class="info">
      <view class="title ellipsis">
        {{info.name}}
      </view>
      <view class="gray">
        <text class="tag">女频男频</text>
        <text class="tag">女频男频</text>
        <text class="tag">女频男频</text>
      </view>
      <view class="count flex flex-a-c">
        <img src="@/assets/images/common/hot.png" class="hot" />
        <text class="num">{{info.chaseTotal}}万人在追</text>
      </view>
      <view class="des gray ellipsis">
        {{info.shotIntroduce}}
      </view>
      <view class="btns flex flex-a-c">
        <view class="btn flex flex-a-c">
            <img src="@/assets/images/common/pause.png">
            <text>立即观看</text>
        </view>
        <view class="btn flex flex-a-c" @click.stop="onChase">
            <text class="" v-if="!info.isChase">追剧</text>
            <text v-else class="gray">已追</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    onChase(){
        this.$emit('onChase',this.info)
    },
    onItem(){
      this.$emit('onItem',this.info)
    }
  },
};
</script>
<style lang="scss" scoped>
.theater-item {
  line-height: 1;
  height: 419rpx;
  border-radius: 12rpx;
  overflow: hidden;
  .poster {
    width: 315rpx;
    height: 419rpx;
    border-radius: 12rpx 0rpx 0rpx 12rpx;
    opacity: 1;
    display: block;
    object-fit: cover;
    flex-shrink: 0;
  }
  .info {
    padding: 30rpx 23rpx;
    background-color: #F7FAFA;
    height: 419rpx;
    overflow: hidden;
    flex-shrink: 0;
    flex: 1;
    border-radius: 0 12rpx 12rpx 0;
    .title {
      color: #1c1e1f;
      font-size: 31rpx;
      line-height: 37rpx;
      margin-bottom: 19rpx;
      height: 75rpx;
      -webkit-line-clamp:2;
      width: 100%;
    }
    .tag {
      font-size: 23rpx;
      margin-right: 8rpx;
    }
    .count {
      margin-top: 13rpx;
      img {
        width: 31rpx;
        height: 31rpx;
      }
      .num {
        color: #6f4a44;
        font-size: 23rpx;
      }
    }
    .des {
      font-size: 25rpx;
      line-height: 35rpx;
      margin-top: 25rpx;
      height: 104rpx;
      -webkit-line-clamp:3;
    }
    .btns{
      margin-top: 21rpx;
    }
    .btn{
        background-color: #fff;
        padding: 15rpx 23rpx;
        border-radius: 46rpx;
        color: #1C1E1F;
        font-size: 27rpx;
        margin-right: 23rpx;
        img{
            width: 23rpx;
            height: 23rpx;
            margin-right: 4rpx;
        }
    }
  }
}
</style>
